<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org/">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>课程章节管理</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css" th:href="@{/css/bootstrap.css}" />
    <link rel="stylesheet" type="text/css" href="/css/back-index.css" th:href="@{/css/back-index.css}" />
    <link rel="stylesheet" href="/layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all">
    <script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap-paginator.js"></script>
    <script src="/js/bootstrap-mypaginator.js"></script>
    <script src="/layui/layui.js"></script>
    <style type="text/css" >
    .file {
        position: relative;
        display: inline-block;
        background: #D0EEFF;
        border: 1px solid #99D3F5;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #1E88C7;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
        width: 100%;
        text-align: center;
    }
    .file:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }
    .file:focus {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }
    </style>

    <script type="text/javascript" >
        layui.use('laydate',function () {
            let laydate = layui.laydate;
            let laydate2 = layui.laydate;
            laydate.render({
                elem: '#dateStart'
                ,type: 'datetime'
                //或 range: '~' 来自定义分割字符
            });
            laydate2.render({
                elem: '#dateEnd'
                ,type: 'datetime'
                //或 range: '~' 来自定义分割字符
            });
        })

        $(function(){
            //返回课程列表
            $("#back").on('click', function(){
                $('#frame-id', window.parent.document).attr('src', '/course/showCourseList');
            });
            //相关评论
            $(".comment-detail").on('click', function(){
                $('#frame-id', window.parent.document).attr('src', 'back_commentSet.html');
            });

            //添加章节
            $("#doAddCourseReource").on('click', function(){
                $(".modal-title").html("添加章节");
                // $("#course-resource-id-input").hide();
                $("#courseReourceModal").modal("show");
            });
            $(".course-reource-btn").on('click', function(){
                $("#courseReourceModal").modal("hide");
            });

            $(".course-reource-modify-btn").on('click', function(){
                $(".modal-title").html("修改章节");
                // $("#course-resource-id-input").show();
                $("#courseReourceModal").modal("show");
            });

            //显示播放页
            // $(".resource-detail").on('click', function(){
            //     $('#frame-id', window.parent.document).attr('src', '/backResource/showResource');
            // });

            // 显示隐藏查询列表
            $('#show-course-resource-search').click(function() {
                $('#show-course-resource-search').hide();
                $('#upp-course-resource-search').show();
                $('.show-course-resource-search').slideDown(500);
            });
            $('#upp-course-resource-search').click(function() {
                $('#show-course-resource-search').show();
                $('#upp-course-resource-search').hide();
                $('.show-course-resource-search').slideUp(500);
            });

            //分页
            let options={
                bootstrapMajorVersion:3,
                // currentPage:"${session.pageUsers.pageNum==0?1:session.pageUsers.pageNum}",
                currentPage:[[${chapterPageInfo.pageNum}]]==0?1:[[${chapterPageInfo.pageNum}]],
                // totalPages:"${pageUsers.pages==0?1:pageUsers.pages}",
                totalPages:[[${chapterPageInfo.pages}]]==0?1:[[${chapterPageInfo.pages}]],
                pageSize:[[${chapterPageInfo.pageSize}]],
                alignment: "center",
                pagination:true,
                pageUrl:function (type,page,current) {
                    return "/chapter/showChapters?pageNo="+page+"&courseId="+[[${courseId}]];
                }


            }
            $("#myPages").bootstrapPaginator(options);

            $("#doSearch").click(function () {
                $("#showList").empty();
                $("#showList").load("/chapter/searchChapters",{"title":$("#course-resource-title-search").val(),"status":$("#course-resource-stauts-search").val(),
                    "id":$("#id").val(),"dateStart":$("#dateStart").val(),"dateEnd":$("#dateEnd").val(),
                    "courseId":$("#course-resource-info-search").val()});
                $("#myPages").hide();
            })
        });

        //显示播放页
        function goResource(courseId,chapterId) {
            $('#frame-id', window.parent.document).attr('src', '/backResource/showResources?courseId='+courseId+'&chapterId='+chapterId);
        }
        function fileUpload(item){
            $(item).click();
        }
        function fileChange(item){
            var file = item.files[0];//获取选中的第一个文件
            $(".file").html(file.name);
            //console.log("file", file.name);
        }

        function modifyStatus(chapterId,status,courseId) {
            $.ajax({
                type:"post",
                url:"/chapter/modifyStatus",
                data:{"chapterId":chapterId,"status":status},
                success:function (response) {
                    if (response.status==1){
                        location.href="/chapter/showChapters?pageNo="+[[${chapterPageInfo.pageNum}]]+"&courseId="+courseId;
                    }
                    else {
                        alert("操作异常");
                    }

                }
            })
        }

        function modifyChapter() {
            $.ajax({
                type:"post",
                url:"/chapter/modifyChapter",
                data:{"title":$("#course-resource-title").val(),"info":$("#course-resource-context").val(),
                "chapterId":$("#chapterId").val()},
                success:function (response) {
                    if (response.status==1){
                        location.href="/chapter/showChapters?pageNo="+[[${chapterPageInfo.pageNum}]]+"&courseId="+$("#courseId").val();
                    }
                    else {
                        alert("操作异常");
                    }
                }
            })
        }

        function selectChapter(chapterId) {
            $.ajax({
                type: "post",
                url:"/chapter/selectChapter",
                data:{"chapterId":chapterId},
                success:function (response) {
                    $("#course-resource-title").val(response.title);
                    $("#course-resource-context").val(response.info);
                    $("#chapterId").val(response.id);
                    $("#courseId").val(response.courseId);
                }
            })
        }


    </script>
</head>

<body>
    <div class="panel panel-default" id="userSet">
        <div class="panel-heading">
            <h3 class="panel-title">课程章节管理</h3>
        </div>
        <div>
            <input type="button" value="添加章节" class="btn btn-primary" id="doAddCourseReource" style="margin: 5px 5px 5px 15px;" />
            <input type="button" value="查询" class="btn btn-success" id="doSearch" style="margin: 5px 5px 5px 0px;" />
            <input type="button" class="btn btn-primary" id="show-course-resource-search" value="展开搜索" />
            <input type="button" value="收起搜索" class="btn btn-primary" id="upp-course-resource-search" style="display: none;" />
            <input type="button" value="返回课程列表" class="btn btn-success" id="back" style="margin: 5px 15px 5px 0px;float: right;" />
        </div>
        <div class="panel-body">
            <div class="show-course-resource-search" style="display: none;">
                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="form-group col-xs-6">
                            <label for="course-resource-title-search" class="col-xs-3 control-label">标题：</label>
                            <div class="col-xs-8">
                                <input type="text" class="form-control" id="course-resource-title-search" placeholder="请输入标题" />
                            </div>
                        </div>
                        <div class="form-group col-xs-6">
                            <label for="course-resource-info-search" class="col-xs-3 control-label">课程ID：</label>
                            <div class="col-xs-8">
                                <input type="text" class="form-control" id="course-resource-info-search" readonly="readonly" th:value="${courseId}" />
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="form-group col-xs-6">
                            <label for="course-resource-stauts-search" class="col-xs-3 control-label">状态：</label>
                            <div class="col-xs-8">
                                <select class="form-control" id="course-resource-stauts-search" name="course-resource-stauts-search" >
                                    <option value="-1" >全部</option>
                                    <option value="1" >启用</option>
                                    <option value="0" >禁用</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-xs-6">
                            <label class="col-xs-3 control-label">章节编号：</label>
                            <div class="col-xs-8">
                                <input type="text" class="form-control" placeholder="请输入章节编号" id="id" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-group col-xs-6">
                            <label class="col-xs-3 control-label">开始日期：</label>
                            <div class="col-xs-8">
                                <input type="text" class="form-control" placeholder="请输入开始时间:2017-10-10" id="dateStart" />
                            </div>
                        </div>
                        <div class="form-group col-xs-6">
                            <label class="col-xs-3 control-label">结束日期：</label>
                            <div class="col-xs-8">
                                <input type="text" class="form-control" placeholder="请输入结束时间:2017-10-12" id="dateEnd"/>
                            </div>
                        </div>
                    </div>
                    
                </form>
            </div>
            
            <div class="show-list" id="showList">
                <table class="table table-bordered table-hover" style='text-align: center;'>
                    <thead>
                        <tr class="text-danger">
                            <th class="text-center">章节编号</th>
                            <th class="text-center">课程编号</th>
                            <th class="text-center">标题</th>
                            <th class="text-center">简介</th>
                            <th class="text-center">创建时间</th>
                            <th class="text-center">状态</th>
                            <th class="text-center">操作</th>
                        </tr>
                    </thead>
                    <tbody id="tb">
                        <tr th:each="chapter:${chapterPageInfo.list}">
                            <td th:text="${chapter.id}"></td>
                            <td th:text="${chapter.courseId}"></td>
                            <td th:text="${chapter.title}"></td>
                            <td th:text="${chapter.info}"></td>
                            <td th:text="${chapter.createDate}"></td>
                            <td th:text="${chapter.status}==1?'启用':'禁用'"></td>
                            <td class="text-center" >
                                <input type="button" class="btn btn-warning btn-sm course-reource-modify-btn" value="修改" th:onclick="|javascript:selectChapter('${chapter.id}')|">
                                <input type="button" th:class="${chapter.status}==1?'btn btn-danger btn-sm':'btn btn-success btn-sm'" th:value="${chapter.status}==1?'禁用':'启用'"
                                th:onclick="|javascript:modifyStatus('${chapter.id}','${chapter.status}','${chapter.courseId}')|">
                                <input type="button" class="btn btn-info btn-sm resource-detail" value="详情" th:onclick="|javascript:goResource('${chapter.id}','${chapter.courseId}')|" />
                                <input type="button" class="btn btn-success btn-sm comment-detail" value="相关评论" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- 分页 -->
            <div style="text-align: center;" >
                <ul id="myPages" ></ul>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" id="courseReourceModal" >
        <!-- 窗口声明 -->
        <div class="modal-dialog modal-lg">
            <!-- 内容声明 -->
            <div class="modal-content">
                <form id="myForm" action="/chapter/addChapter" enctype="multipart/form-data">
                <!-- 头部、主体、脚注 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" >添加章节</h4>
                </div>
                <div class="modal-body text-center">
                    <input type="hidden" name="chapterId" id="chapterId"   />
                    <input type="hidden" name="courseId" id="courseId"   />
                    <div class="row text-right" id="course-resource-id-input" >
                        <label for="course-resource-id" class="col-xs-4 control-label">课程编号：</label>
                        <div class="col-xs-4">
                            <input type="text" class="form-control" id="course-resource-id" name="course-resource-id" th:value="${courseId}" readonly />
                        </div>
                    </div>
                    <br>
                    <div class="row text-right">
                        <label for="course-resource-title" class="col-xs-4 control-label">章节标题：</label>
                        <div class="col-xs-4">
                            <input type="text" class="form-control" id="course-resource-title" name="course-resource-title" />
                        </div>
                    </div>
                    <br>
                    <div class="row text-right">
                        <label for="course-resource-context" class="col-xs-4 control-label">内容详情：</label>
                        <div class="col-xs-4">
                            <input type="text" class="form-control" id="course-resource-context" name="course-resource-context"/>
                        </div>
                    </div>
                    <br>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-primary course-reource-btn" value="确定" onclick="modifyChapter()" ></input>
                    <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
                </div>
                </form>
            </div>
        </div>
    </div>
</body>

</html>